<template>
	<!-- 日期选择器容器 -->
	<view class="date-choose">
		<!-- 左侧选择框，条件渲染 -->
		<view class="left-box" v-if='showLeftBox'>
			<!-- 左侧内容区域 -->
			<view class="left-content">
				<!-- 如果使用左侧插槽，则渲染插槽内容 -->
				<template v-if='useLeftSlot'>
					<slot></slot>
				</template>
				<!-- 否则渲染日期选择器 -->
				<template wx:else>
					<picker class="date-picker" mode="date" :value='chooseItem.formatDateFull'
						@change='changeDatePicker'>
						<uni-icons type='calendar' color='#888' size='24'></uni-icons>
					</picker>
				</template>
			</view>
		</view>
		<!-- 轮播容器，用于切换不同周的日期 -->
		<swiper class="swiper-box" :current='currentIndex' @change='swiperChangeAction'
			@animationfinish="swiperAnimationFinishAction">
			<!-- 轮播项，遍历页面数据列表 -->
			<swiper-item class="swiper-item" v-for='(item, index) in pageDataList' :key="index">
				<!-- 日期组容器 -->
				<view class="group-box">
					<!-- 日期项，遍历每组日期 -->
					<view class="group-item" :class="[getDayItemSubClass(dayItem, chooseItem)]"
						v-for='(dayItem, dayIndex) in item' :key='dayItem.formatDateFull'
						@tap.stop='tapItemAction(dayItem)'>
						<!-- 星期标题 -->
						<view class="title-1">{{getWeekDateStr(dayItem, language)}}</view>
						<!-- 日期标题 -->
						<view class="title-2">{{getFormatDateStr(dayItem, ".")}}</view>
						<!-- 徽章，如果有徽章数据则显示 -->
						<view class="badge" v-if='showDayBadgeData(dayItem, badgeData)'>
							{{getDayBadgeData(dayItem, badgeData)}}
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 导入dayjs日期处理库
	const dayjs = require("../../libs/dayjs/dayjs.min.js");
	import {
		DayItem,
		getBackwardWeekListData,
		getForwardWeekListData,
		getWeekItemData
	} from "./tab-choose-day-service"
	import cuTabChooseDateMixin from "../common/cu-tab-choose-date/mixins";
	export default {
		mixins: [cuTabChooseDateMixin],
		methods: {
			/**
			 * 初始化列表数据
			 * @param {Date} date  - 日期对象
			 * need reload 需要重载方法
			 */
			initPageDataList(date) {
				if (!date) date = new Date();
				// 本周
				let currentWeekItem = getWeekItemData(date)
				// 若干后续周
				let nextWeekDate = dayjs(date).day(7).toDate();
				let forwardWeekList = getForwardWeekListData(nextWeekDate);
				// 若干之前周
				let lastWeekDate = dayjs(date).day(-1).toDate();
				let backwardWeekList = getBackwardWeekListData(lastWeekDate);
				// 初始化weekList
				this.pageDataList = [...backwardWeekList, currentWeekItem, ...forwardWeekList]
				// index归中
				this.currentIndex = backwardWeekList.length;
			},

			/**
			 * 设置选中数据
			 * @param {Date} date 
			 * need reload 需要重载方法
			 */
			setChooseItemByDate(date) {
				this.chooseItem = new DayItem(date);
			},

			/**
			 * 获取未来数据
			 * need reload 需要重载方法
			 */
			getForwarListData() {
				let newestWeekItem = this.pageDataList[this.pageDataList.length - 1]; // 获取最后一周数据
				let newestDate = newestWeekItem[0].date; // 获取最后一周中某一天的date对象
				let nextWeekDate = dayjs(newestDate).day(7).toDate(); // 计算下一周周一date对象
				let forwardWeekList = getForwardWeekListData(nextWeekDate); // 获取 未来几周数据列表
				return forwardWeekList;
			},

			/**
			 * 获取过去数据
			 * need reload 需要重载方法
			 */
			getBackwardListData() {
				let oldestWeekItem = this.pageDataList[0]; // 获取最早一周数据
				let oldestDate = oldestWeekItem[0].date; // 获取最早一周中某一天的date数据
				let preWeekDate = dayjs(oldestDate).day(-1).toDate(); // 计算上一周周六date对象
				let backwardWeekList = getBackwardWeekListData(preWeekDate); // 获取 之前几周数据列表
				return backwardWeekList;
			},

			/**
			 * 根据日期的状态和选中情况生成对应的CSS类名
			 * @param {Object} dayItem - 包含日期信息的对象，需要包含dayStatus和formatDateFull属性
			 * @param {Object} chooseDayItem - 当前选中的日期对象，需要包含formatDateFull属性
			 * @returns {String} - 返回生成的CSS类名字符串
			 */
			getDayItemSubClass(dayItem, chooseDayItem) {
				// 从dayItem对象中解构出dayStatus和formatDateFull属性
				const {
					dayStatus,
					formatDateFull
				} = dayItem || {}

				// 从chooseDayItem对象中解构出formatDateFull属性，并重命名为chooseFormatDateFull
				const {
					formatDateFull: chooseFormatDateFull
				} = chooseDayItem || {}

				// 初始化结果字符串
				var result = '';

				// 根据dayStatus的值设置基础类名
				if (dayStatus == -1) {
					result = 'pass-item'; // 过去日期的类名
				} else if (dayStatus == 1) {
					result = 'future-item'; // 未来日期的类名
				} else {
					result = 'current-item'; // 当前日期的类名
				}

				// 如果当前日期是选中的日期，添加选中类名
				if (chooseDayItem && formatDateFull == chooseFormatDateFull) {
					result = result + " " + "choose-item"; // 添加选中状态的类名
				}

				// 返回最终组合的类名字符串
				return result;
			},


			/**
			 * 检查指定日期是否有对应的徽章数据
			 * @param {Object} dayItem - 包含日期信息的对象，需要包含formatDateFull属性
			 * @param {Object} badgeData - 包含徽章数据的对象，键为日期格式字符串，值为徽章数据
			 * @returns {Boolean} - 如果日期有对应的徽章数据则返回true，否则返回false
			 */
			showDayBadgeData(dayItem, badgeData) {
				// 从dayItem对象中解构出formatDateFull属性
				const {
					formatDateFull
				} = dayItem || {}

				// 如果badgeData不存在或为空，直接返回false
				if (!badgeData) return false;

				// 尝试从badgeData对象中获取对应日期的数据
				var result = badgeData[formatDateFull];

				// 检查结果是否为null或undefined，如果不是则表示有数据
				return result !== null && result !== undefined;
			},

			/**
			 * 获取并格式化指定日期的徽章数据
			 * @param {Object} dayItem - 包含日期信息的对象，需要包含formatDateFull属性
			 * @param {Object} badgeData - 包含徽章数据的对象，键为日期格式字符串，值为徽章数据
			 * @returns {String} - 返回格式化后的徽章数据，如果没有数据则返回空字符串，如果数值大于99则返回"99+"
			 */
			getDayBadgeData(dayItem, badgeData) {
				// 从dayItem对象中解构出formatDateFull属性
				const {
					formatDateFull
				} = dayItem || {}

				// 如果badgeData不存在或为空，直接返回空字符串
				if (!badgeData) return '';

				// 尝试从badgeData对象中获取对应日期的数据
				var result = badgeData[formatDateFull];

				// 检查结果是否存在
				if (result !== null && result !== undefined) {
					// 如果结果可以转换为数字且大于99，返回"99+"
					if (parseInt(result) > 99) {
						return "99+"
					} else {
						// 否则返回原始结果
						return result;
					}
				} else {
					// 如果结果不存在，返回空字符串
					return '';
				}
			},
			/**
			 * 格式化日期字符串，将默认的日期分隔符"-"替换为指定的分隔符
			 * @param {Object} dayItem - 包含日期信息的对象，需要包含formatDate属性
			 * @param {String} splitChar - 要替换成的日期分隔符
			 * @returns {String} - 返回格式化后的日期字符串
			 */
			getFormatDateStr(dayItem, splitChar) {
				// 从dayItem对象中解构出formatDate属性
				const {
					formatDate
				} = dayItem || {}

				// 将日期字符串中的"-"替换为指定的splitChar
				return formatDate.split("-").join(splitChar);
			},
			/**
			 * 获取指定语言的星期几显示文本
			 * @param {Object} dayItem - 包含日期信息的对象，需要包含week属性
			 * @param {String} language - 语言标识，'zh'表示中文，其他值保持英文
			 * @returns {String} - 返回对应语言的星期几文本
			 */
			getWeekDateStr(dayItem, language) {
				// 从dayItem对象中解构出week属性
				const {
					week
				} = dayItem || {}

				// 如果语言设置为中文('zh')
				if (language == 'zh') {
					// 将英文星期几转换为中文显示
					if (week == 'Mon') {
						return "周一"
					} else if (week == 'Tue') {
						return "周二"
					} else if (week == 'Wed') {
						return "周三"
					} else if (week == 'Thu') {
						return "周四"
					} else if (week == 'Fri') {
						return "周五"
					} else if (week == 'Sat') {
						return "周六"
					} else if (week == 'Sun') {
						return "周日"
					}
				}

				// 如果不是中文或没有匹配的英文星期，返回原始英文值
				return week;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../common/cu-tab-choose-date/styles.scss";
</style>